<!--表单设计器组件-->
<template>
  <container>
    <template slot="center">
      <div class="wrapper">
        <!--左侧组件选择-->
        <div class="left-board">
          <div class="logo-wrapper">
            <div class="logo">
              表单设计器
            </div>
          </div>
          <div class="left-scrollbar">
            <div class="components-list">
              <div class="components-title">
                常用组件
              </div>
              <draggable
                class="components-draggable"
                :list="formItems"
                :group="{ name: 'componentsGroup', pull: 'clone', put: false }"
                :clone="cloneComponent"
                draggable=".components-item"
                :sort="false"
                @start="onStart"
                @end="onEnd"
              >
                <div
                  v-for="(element, index) in formItems" :key="index" class="components-item"
                  @click="addComponent(element)"
                >
                  <div class="components-body" :class="{ 'dynamicTable-tips': dynamicTableExist(element)}">
                    <icon :code="element.compIcon" :text="element.compName"/>
                  </div>
                </div>
              </draggable>
              <div class="components-title">
                布局组件
              </div>
              <draggable
                class="components-draggable"
                :list="layoutFormItems"
                :group="{ name: 'componentsGroup', pull: 'clone', put: false }"
                :clone="cloneComponent"
                draggable=".components-item"
                :sort="false"
                @start="onStart"
                @end="onEnd"
              >
                <div
                  v-for="(element, index) in layoutFormItems" :key="index" class="components-item"
                  @click="addComponent(element)"
                >
                  <div class="components-body">
                    <icon :code="element.compIcon" :text="element.compName"/>
                  </div>
                </div>
              </draggable>
              <div class="components-title">
                辅助组件
              </div>
              <draggable
                class="components-draggable"
                :list="assistFormItems"
                :group="{ name: 'componentsGroup', pull: 'clone', put: false }"
                :clone="cloneComponent"
                draggable=".components-item"
                :sort="false"
                @start="onStart"
                @end="onEnd"
              >
                <div
                  v-for="(element, index) in assistFormItems" :key="index" class="components-item"
                  @click="addComponent(element)"
                >
                  <div class="components-body">
                    <icon :code="element.compIcon" :text="element.compName"/>
                  </div>
                </div>
              </draggable>
            </div>
          </div>
        </div>
        <designer ref="designer" :queryId="routeQueryId" :list="designList" :formConfig="formConfig" :inform="inform" @clear="designList = []" @updateJSON="handlerUpdateJSON" :activeData="activeData"/>
      </div>
    </template>
  </container>
</template>
<script>
import draggable from "vuedraggable";
import {formItems,assistFormItems,layoutFormItems} from "./custom/itemList";
import designer from "./designer";
import icon from "./icon";
import {getSimpleId,setTableId} from "./utils/IdGenerate";
import formConf from "./custom/formConf";
import {dynamicTableAllowedItems} from "./custom/formConf";
import {getForm, addForm, updateForm} from "@/api/workflow/form";

let tempActiveData;

export default {
  name:"formDesigner",
  components:{
    draggable
    ,icon,
    designer
  },
  data() {
    return {
      formItems:formItems,
      assistFormItems:assistFormItems,
      layoutFormItems:layoutFormItems,
      designList:[],
      activeData:{},
      formConfig:formConf,
      routeQueryId:'',
      inform:{},
    }
  },
  props:{
    value:{
      type:String,
      default:''
    },
    queryId:{
      type:String,
      default:''
    }
  },
  created() {
    const that = this;
    const id =  that.queryId;
    console.log("formDesigner mounted queryId",that.queryId);
    if (id) {
      getForm(id).then(res =>{
        console.log("getForm res=",res);
        const content = JSON.parse(res.data.content);
        that.formConfig = content.config;
        that.designList = content.list;
        that.inform = res.data;
      })
    }
  },
  mounted() {

  },
  methods: {
    addComponent(element){

    },
    cloneComponent(origin){
      const clone = JSON.parse(JSON.stringify(origin))
      if (!clone.layout) clone.layout = 'colItem'
      if (clone.layout === 'colItem'||clone.layout === 'dynamicItem') {
        let uId = "fd_"+getSimpleId();
        clone.id = uId;
        clone._id = uId;
        tempActiveData = clone;
      }else if (clone.layout === 'rowItem'){
        let uId = "row_"+getSimpleId();
        clone.id = uId;
        clone._id = uId;
        tempActiveData = clone;
      }else if(clone.layout === 'tableItem'){
        let uId = "table_"+getSimpleId();
        clone.id = uId;
        clone._id = uId;
        //增加td默认的id
        setTableId(clone);
        tempActiveData = clone;
      }
      this.$refs.designer.activeItem = tempActiveData;
    },
    onStart(obj){

    },
    onEnd(obj){
      if(obj.from !== obj.to){
        this.activeData = tempActiveData;
        this.$refs.designer.activeItem = this.activeData;
        if(obj.to.className.indexOf('row-drag')<0){
          this.designList.splice(obj.newIndex,0,this.activeData);
        }
      }else{
        this.$refs.designer.activeItem = {};
      }

    },
    getFormData(){
      return this.formData;
    },
    handlerUpdateJSON(json){
      const jsonObject = JSON.parse(json);
      this.designList = [];
      this.designList = this.designList.concat(jsonObject.list);
      this.formConfig = Object.assign({}, jsonObject.config);
      this.$refs['designer'].changeFormConfig(this.formConfig);
    }
  },
  computed:{
    formData:function(){
      const list = this.designList;
      const config = this.formConfig;
      let formData = {};
      formData.list = list;
      formData.config = config;
      console.log("formDesigner formData=",formData);
      return JSON.stringify(formData);
        //this.$emit('input',JSON.stringify(formData));
    },
    dynamicTableExist(){
      return function(element){
        return  this.formConfig.dynamicTableAllowed
            &&this.designList.filter(item=>item.compType === 'dynamicTable').length>0
            &&dynamicTableAllowedItems.includes(element.compType);
      }
    }
  },
  watch:{
    value(newVal){
      if(newVal !==''){
        const formData = JSON.parse(newVal);
        this.designList= formData.list;
        this.formConfig = formData.config;
      }
    }
  }
}

</script>
<style lang='scss' scoped>
.wrapper{
  display: flex;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
}
/*左侧面板*/
.left-board {
  width: 260px;
  position: relative;
  left: 0;
  top: 0;
  height: 100%;
  overflow: auto;
}
.logo-wrapper{
  position: relative;
  height: 42px;
  background: #fff;
  border-bottom: 1px solid #f1e8e8;
  box-sizing: border-box;
}
.logo{
  position: relative;
  padding-left: 12px;
  top: 6px;
  line-height: 30px;
  color: #00afff;
  font-weight: 600;
  font-size: 17px;
  white-space: nowrap;
  > img{
    width: 30px;
    height: 30px;
    vertical-align: top;
  }
  .github{
    display: inline-block;
    vertical-align: sub;
    margin-left: 15px;
    > img{
      height: 22px;
    }
  }
}
.left-scrollbar{
  width: 100%;
  height: calc(100% - 45px);
  overflow: auto;
}
.components-list {
  padding: 8px;
  box-sizing: border-box;
  height: 100%;
  .components-item {
    display: inline-block;
    width: 48%;
    margin: 1%;
    transition: transform 0ms !important;
  }
}
.components-draggable{
  padding-bottom: 20px;
}
.components-title{
  font-size: 14px;
  color: #222;
  margin: 6px 2px;
  .svg-icon{
    color: #666;
    font-size: 18px;
  }
}
$selectedColor: #e6f2ff;
$lighterBlue: #409EFF;
.dynamicTable-tips{
  border:1px solid#F08080
}
.components-body {
  background: #f4f6fc;
  font-size: 12px;
  margin-left: 5px;
  padding: 5px 10px 8px;
  cursor: move;
  border: 1px solid #409eff;
  border-radius: 3px;
}
.components-body:hover {
  border: 1px dashed #f56c6c;
  color: #f56c6c;
}
</style>
